import { useEffect } from "react";
import { Space, message, Form, Select } from "antd";
import { Button } from "@douyinfe/semi-ui";
import { useModel } from "umi";
import { useReactive } from "ahooks";

import useApplication from "../../hooks/application/organization/useUpdateApplication";
import { useOrganizationDatabase } from "../../hooks/databases";

const AddDependentedDatabase = ({ application, databases, addDatabase, reloadData }) => {
    const { onCloseGlobalModal } = useModel("global.modal");
    const [form] = Form.useForm();
    const { updateApplication } = useApplication();
    const { loadDatabaseVersionsByDatabaseName, versions, versionLoading } = useOrganizationDatabase();

    const state = useReactive({
        submitLoading: false,
        databaseName: "",
        selectedDatabase: null,
    });

    useEffect(() => {
        if (state.databaseName) {
            form.setFieldValue("version", "");
            loadDatabaseVersionsByDatabaseName(state.databaseName);
        }
    }, [state.databaseName]);

    const onFinish = async (values) => {
        let appData = application.appData;
        let newData = {
            uuid: state.selectedDatabase.uuid,
            title: state.selectedDatabase.title,
            ...values,
        };
        let index = appData.findIndex((item) => item.databaseName === values.databaseName);
        if (index === -1) {
            appData.push(newData);
        } else {
            appData[index] = newData;
        }
        let variables = {
            appUpti: new Date().getUTCTime(),
            appData,
        };
        updateApplication(application.appUuid, variables, (res) => {
            if (res) {
                message.success("成功更新应用信息");
                addDatabase(appData);
                reloadData && reloadData();
                onCloseGlobalModal();
            }
        });
    };

    return (
        <div style={{ padding: 20 }}>
            <Form form={form} onFinish={onFinish} layout="horizontal" labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
                <Form.Item label="数据库模型名称" name="databaseName" rules={[{ required: true, message: "请选择数据库模型名称" }]}>
                    <Select
                        allowClear
                        onSelect={(value) => {
                            state.databaseName = value;
                            state.selectedDatabase = databases.find((item) => item.databaseName === value);
                        }}
                    >
                        {databases.map((item, index) => (
                            <Select.Option key={index} value={item.databaseName}>
                                {item.title} - {item.databaseName}
                            </Select.Option>
                        ))}
                    </Select>
                </Form.Item>

                <Form.Item label="数据库模型版本" name="versionNo" rules={[{ required: true, message: "请选择数据库模型版本" }]}>
                    <Select allowClear loading={versionLoading}>
                        {versions.map((item, index) => (
                            <Select.Option key={index} value={item.versionNo}>
                                {item.versionNo}
                            </Select.Option>
                        ))}
                    </Select>
                </Form.Item>

                <div style={{ textAlign: "center" }}>
                    <Space>
                        <Button loading={state.submitLoading} type="primary" htmlType="submit">
                            添加
                        </Button>
                        <Button loading={state.submitLoading} htmlType="button" onClick={() => form.resetFields()}>
                            重置
                        </Button>
                    </Space>
                </div>
            </Form>
        </div>
    );
};

export default AddDependentedDatabase;
